<template>
    <div class="parent">
        <div class="topparent">
            <header class="header">
                <x-header class="headerContent" :left-options="{showBack: false}"><span class="title">我的</span></x-header>
            </header>
            <div class="pic">
                <div class="titlePic">
                    <div class="headPic">
                        <img src="../assets/121.jpg" alt="">
                    </div>
                    <div class="headUser" @click="account">
                        <span>用户名:{{userName}}</span>
                        <i class="iconfont icon-bianji icon"></i>
                    </div>
                </div>
                <div class="mark">
                    <ul class="list">
                        <li class="listItem" @click="goDetail('archives')">
                            <p class="icon">
                                <i class="icons iconfont icon-dingdanchaxun"></i>
                            </p>
                            <p class="iconText">订单查询</p> 
                        </li>
                        <li class="listItem" @click="goDetail('address')">
                            <p class="icon">
                                <i class="icons iconfont icon-bangdingdizhi"></i>
                            </p>
                            <p class="iconText">用热地址绑定</p>
                        </li>
                        <li class="listItem" @click="goDetail('customer')">
                            <p class="icon">
                                <i class="icons iconfont icon-yijiankefu"></i>
                            </p>
                            <p class="iconText">一键客服</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="main">
            <div class="group">
                <group class="groupTitle">
                    <cell class="cell" link="/My/Repairrecord">
                        <div class="cont">
                            <div class="left">
                                <span slot="icon" class="icon iconfont icon-dingdanjilu"></span>
                            </div>
                            <div class="right">
                                <span class="title">报修记录</span>
                            </div>
                        </div>
                    </cell>
                    <cell class="cell" link="/Home/Paymentrecord">
                        <div class="cont">
                            <div class="left">
                                <span slot="icon" class="icon iconfont icon-jiaofei"></span>
                            </div>
                            <div class="right">
                                <span class="title">缴费</span>
                            </div>
                        </div>
                    </cell>
                    <cell class="cell" link="/Home/Record">
                        <div class="cont">
                            <div class="left">
                                <span slot="icon" class="icon iconfont icon-dianzifapiao"></span>
                            </div>
                            <div class="right">
                                <span class="title">电子发票</span>
                            </div>
                        </div>
                    </cell>
                    <cell class="cell" is-link>
                        <div class="cont">
                            <div class="left">
                                <span slot="icon" class="icon iconfont icon-guanyu"></span>
                            </div>
                            <div class="right">
                                <span class="title">关于</span>
                            </div>
                        </div>
                    </cell>
                    <cell class="cell" is-link>
                        <div class="cont">
                            <div class="left">
                                <span slot="icon" class="icon iconfont icon-hetong"></span>
                            </div>
                            <div class="right">
                                <span class="title">供热合同</span>
                            </div>
                        </div>
                    </cell>
                </group>
            </div>
            <div class="backBtn">
                <div class="btn" @click="signOut">
                    <x-button class="xbtn">退出登录</x-button>
                </div>
            </div>
        </div>
        <Tabs></Tabs>
    </div>
</template>
<script>
import { XHeader, Group, Cell, XButton } from 'vux'
import Tabs from '../components/tabBar'
export default {
    name: 'My',
    data () {
        return {
            userName: ''
        }
    },
    components: {
        XHeader,
        Group,
        Cell,
        Tabs,
        XButton
    },
    created () {
        this.userName = JSON.parse(sessionStorage.getItem('userInfo')).page.fullName
    },
    methods: {
        account () {
            this.$router.push({
                path: '/Home/Account'
            })
        },   
        signOut () {
            sessionStorage.removeItem('userInfo')
            this.$router.push({
                path: '/Login'
            })
        },
        goDetail (key) {
            switch(key) {
                case 'archives': 
                    console.log('档案查询')
                break;
                case 'address': 
                    console.log('用热地址绑定')
                break;
                case 'customer': 
                    // console.log('一键客服')
                    this.callPhone('18201345845')
                break;
            }
        },
        callPhone (phoneNumber) {
            window.location.href = 'tel://' + phoneNumber
        }
    }
}
</script>
<style scoped lang="less">
.parent{
    width: 100%;
    height: 100%;
    background:rgba(250,250,250,1);
}
.title{
    font-size: 16px;
    font-family:ArialMT;
    color:rgba(255,255,255,1);
    line-height:18px;
    letter-spacing:1px;
}
.header{
    width: 100%;
    height: 1.333333rem;
}
.topparent{
    background:linear-gradient(135deg,rgba(255,199,38,1) 0%,rgba(249,151,22,1) 100%);
}
.headerContent{
    width: 100%;
    height: 100%;
    background:transparent;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.pic{
    width: 100%;
    height: 4.906667rem;
    position: relative;
    .titlePic{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        .headPic{
            width: 1.893333rem;
            height: 1.893333rem;
            border: 1px solid #fff;
            border-radius: 50%;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            margin-top: .32rem;
            img{
                display: block;
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }
        .headUser{
            width: 100%;
            height: .666667rem;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            font-size:16px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(255,255,255,1);
            line-height:22px;
            letter-spacing:1px;
            .icon{
                font-size: 16px;
                margin-left: .133333rem;
            }
        }
    }
}

.mark{
    width: 100%;
    height: 1.52rem;
    position: absolute;
    bottom: .16rem;
    background: rgba(255, 255, 255, 0.2);
    .list{
        width: 100%;
        height: 100%;
        padding: .133333rem 0;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        .listItem{
            width: 3.386667rem;
            height: 100%;
            border-right: 1px solid #fff;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .icon{
                width: 1.333333rem;
                height: 1.333333rem;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                .icons{
                    font-size: 21px;
                    color: #fff;
                }
            }
            .iconText{
                font-size:12px;
                font-family:ArialMT;
                color:rgba(255,255,255,1);
                line-height:14px;
                letter-spacing:1px;
            }
        }
        .listItem:last-child{
            border-right: none;
        }
    }
}
.main{
    width: 100%;
}
.group{
    width: 100%;
    margin-top: -0.233333rem;
    .groupTitle{
        width: 100%;
    }
}

.cell{
    width: 100%;
    height: 1.333333rem;
    .cont{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        .left{
            width: 1rem;
            height: 1rem;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            .icon{
                font-size: 21px;
                color: rgba(255,199,38,1);
            }
        }
        .right{
            width: 7.55rem;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            .title{
                font-size:14px;
                font-family:ArialMT;
                color:rgba(82,82,82,1);
                line-height:16px;
                letter-spacing:1px;
            }
            .desc{
                font-size:12px;
                font-family:ArialMT;
                color:rgba(204,204,204,1);
                line-height:14px;
                letter-spacing:1px;
            }
        }
    }
}
.backBtn{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 1.36rem;
    .btn{
        width: 8.4rem;
        height: 1.093333rem;
        .xbtn{
            width: 100%;
            height: 100%;
            color: #FFC726;
            background: #fff;
            font-size:14px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(255,199,38,1);
            line-height:20px;
            letter-spacing:1px;
        }
    }
}

</style>
